<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery动画</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: lightcoral;
            display: none;
        }
    </style>
</head>
<body>
    <input type="button" value="显示" id="show">
    <input type="button" value="隐藏" id="hide">
    <input type="button" value="切换" id="toggle">
    <input type="button" value="滑入" id="slideDown">
    <input type="button" value="滑出" id="slideUp">
    <input type="button" value="滑动切换" id="slideToggle">
    <input type="button" value="淡入" id="fadeIn">
    <input type="button" value="淡出" id="fadeOut">
    <input type="button" value="淡入淡出切换" id="fadeToggle">
    <input type="button" value="淡入到那里" id="fadeTo">
    <div id="div1"></div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        $('#show').click(function () {
            // 若show这个方法没有参数 则没有动画效果
            // 参数1为执行动画的时长 参数2为动画执行完毕的回调函数
            $('#div1').show(500)
        });
        $('#hide').click(function () {
            $('#div1').hide(500)
        });
        $('#toggle').click(function () {
            // 如果元素隐藏状态 则显示
            $('#div1').toggle(500)
        });
        $('#slideDown').click(function () {
            $('#div1').slideDown(500)
        });
        $('#slideUp').click(function () {
            $('#div1').slideUp(500)
        });
        $('#slideToggle').click(function () {
            $('#div1').slideToggle(500)
        });
        $('#fadeIn').click(function () {
            $('#div1').fadeIn(500)
        });
        $('#fadeOut').click(function () {
            $('#div1').fadeOut(500)
        });
        $('#fadeToggle').click(function () {
            $('#div1').fadeToggle(500)
        });
        $('#fadeTo').click(function () {
            // 第二个参数为指定的透明度
            $('#div1').fadeTo(500, 0.5)
        });
    })
</script>
</html>